<script setup>
import { ref, watch } from 'vue'

const count = ref(99)
const add = () => count.value++
const cut = () => count.value--

const money = ref(100)
const makeMoney = () => (money.value += 10000)

const person = ref({
  name: '小董',
  age: 19,
})
const changAge = () => person.value.age++
// 1.监听单个数据
watch([count], (newVlaue, oldVlaue) => {
  console.log(`新增:${newVlaue} 旧值:${oldVlaue}`)
})
// 2.监听多个数据
watch(
  [count, money],
  (newVlaue, oldVlaue) => {
    console.log(`新增:${newVlaue} 旧值:${oldVlaue}`)
  },
  {
    deep: true,
  },
)
// 3.监听复杂数据类型（整个对象）
watch(person, (newVlaue) => {
  console.log(`新增:${newVlaue}`)
})
// 4.监听复杂数据类型（单个数据）
watch(
  () => person.value.age,
  (newVlaue) => {
    console.log(`新增:${newVlaue}`)
  },
  {
    immediate: true,
  },
)
</script>

<template>
  <div>
    <button @click="cut">-</button>
    <span>{{ count }}</span>
    <button @click="add">+</button>
    <hr />
    <div>钱包: {{ money }}</div>
    <button @click="makeMoney">搞钱</button>
    <hr />
    <div>{{ person }}</div>
    <button @click="changAge">修改年龄</button>
  </div>
</template>
